<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <tb-header></tb-header>
      <tbbody></tbbody>
      <tbfooter></tbfooter>
    </div>

    <script src="../Vue.js"></script>
    <script>
      // 组件就是一个具有最小功能的html、css、js、图片的聚合体

      // 创建组件
      // 1. 全局创建组件
      // 需要有两个参数, 第一个参数就是组件名称, 第二个参数是选项对象
      // 选项对象里面能写的东西和new Vue里面的对象是一致的，除了没有el, template选项是必须要有的

      // 组件名的取名规则
      // 顾名思义
      // 取名要使用连字符或者大驼峰，调用的时候要使用连字符
      Vue.component("TbHeader", {
        // 组件里面的data，不能写成对象，要写成函数返回对象
        // template里面必须只有一个根元素
        data() {
          return {
            text: "123",
          };
        },
        template:
          "<header>这是淘宝头部 - {{text}} - <button v-on:click='fn'>btn</button></header>",
        methods: {
          fn() {
            console.log(123);
          },
        },
      });

      Vue.component("TbImg", {
        template: `
          <div>
            <img src="https://cn.vuejs.org/images/logo.svg" />
            <img src="https://cn.vuejs.org/images/logo.svg" />
          </div>
        `,
      });

      Vue.component("tbbody", {
        template: "<main>这是淘宝内容 - <tb-img></tb-img></main>",
      });

      Vue.component("tbfooter", {
        template: "<footer>这是淘宝底部</footer>",
      });

      new Vue({
        el: "#app",
        data: {},
      });
    </script>
  </body>
</html>
